<template>
    <section>
        <!--搜索工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filters" ref="filters" label-width="80px">

                <el-form-item prop="type">
                    <el-select placeholder="合同类型" clearable v-model="filters.type" size="18px">
                        <el-option :key="value" :label="txt" :value="value"
                                   v-for="(txt, value) in options.contract_type"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="product_name">
                    <el-input
                            placeholder="产品名称"
                            v-model.trim="filters.product_name">
                    </el-input>
                </el-form-item>
                <el-form-item prop="state">
                    <el-select placeholder="产品状态" clearable v-model="filters.state" size="18px">
                        <el-option :key="value" :label="txt" :value="value"
                                   v-for="(txt, value) in options.product_state"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getProducts">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetForm('filters')">清空</el-button>
                </el-form-item>

            </el-form>
        </el-col>
        <el-col :span="24" class="toolbar">
            <el-button type="primary" @click="productAdd">新增产品</el-button>
        </el-col>
        <!--搜索结果表格-->
        <el-table
                :header-row-style="headerRowStyle"
                :data="tableData"
                stripe
                v-loading="listLoading"
                style="width: 100%;">
            <el-table-column
                    align="center"
                    label="类型"
                    :formatter="formatterType">
            </el-table-column>
            <el-table-column
                    label="产品名称"
                    align="center">
                <template slot-scope="scope">
                    <el-button
                            @click="productInfo(scope.row.id)"
                            type="text"
                            size="small">
                        {{ scope.row.product_name }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="投资期限"
                    :formatter="formatInvestmentPeriod">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="预期收益率"
                    :formatter="formatExpectedEarnings">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="客户返还收益方式"
                    :formatter="formatIncomeReturnType">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="状态"
                    :formatter="formatterState">
            </el-table-column>
            <el-table-column label="操作" align="left" width="160">
                <template slot-scope="scope">
                    <el-button size="mini"
                               @click="productEdit(scope.row.id)" v-if="scope.row.state === 1">编辑
                    </el-button>
                    <el-button size="mini"
                               type="danger"
                               @click="productDisable(scope.row.id)" v-if="scope.row.state === 1">停用
                    </el-button>
                    <el-button size="mini"
                               type="danger"
                               @click="productEnable(scope.row.id)" v-if="scope.row.state === 2">启用
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    style="text-align: center;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="pager.page_size"
                    :page-sizes="pager.sizes"
                    background
                    :current-page="pager.page_no"
                    layout="prev,pager,next,sizes,total"
                    :total="pager.total">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
    import * as api from '../../api/product_api'
    import dict from '../../common/js/dict';
    import * as commons from '../../common/js/commons';

    export default {
        data() {
            return {
                //表单header样式
                headerRowStyle: {
                    backgroundColor: "#ddd",
                    color: "#333",
                    textAlign: "center"
                },
                //搜索条件
                filters: {
                    type: "",
                    product_name: "",
                    state: "1"
                },
                //分页设置
                pager: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_no: 1
                },
                options: {
                    product_state: dict.product_state,
                    contract_type: dict.contract_search_type,
                    investment_period: dict.investment_period,
                    income_return_type: dict.income_return_type
                },
                //表格数据
                tableData: [],
                listLoading: false
            };
        },
        methods: {
            formatExpectedEarnings(val) {
                if (val.expected_earnings) {
                    let rate = commons.computeRate(val.expected_earnings);
                    return (rate + '%');
                }
                else {
                    return "";
                }
            },
            formatInvestmentPeriod(val) {
                return this.options.investment_period[val.investment_period];
            },
            formatIncomeReturnType(val) {
                return this.options.income_return_type[val.income_return_type];
            },
            //显示状态
            formatterState(row) {
                return this.options.product_state[row.state];
            },
            formatterType(row) {
                return this.options.contract_type[row.type];
            },
            productAdd() {
                this.$router.push('add');
            },
            //转向销售详情页
            productInfo(id) {
                this.$router.push('info/' + id);
            },
            productEdit(id) {
                this.$router.push('edit/' + id);
            },
            productDisable(id) {

                this.$confirm('确认禁用此产品？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false,   //不通过点击遮罩关闭弹框
                    type: 'info'
                }).then(() => {
                    this.listLoading = true;  //隐藏loading
                    let params = {
                        id: id
                    };
                    api.productDisable(params).then((res) => {
                        if (res.data.status == 200) {
                            this.listLoading = false;  //隐藏loading

                            this.$message({
                                type: 'success',
                                message: '停用成功!'
                            });

                            this.getProducts();
                        } else {
                            if (res.data.status == 401) {
                                this.$router.push('/login');
                            }
                            this.$message.error(res.data.status + " " + res.data.msg);
                        }
                    });
                }).catch((e) => {
                    /*this.$message({
                        type: 'info',
                        message: e.message
                    });*/
                });


            },
            productEnable(id) {

                this.$confirm('确认启用此产品？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false,   //不通过点击遮罩关闭弹框
                    type: 'info'
                }).then(() => {

                        this.listLoading = true;  //隐藏loading
                        let params = {
                            id: id
                        };
                        api.productEnable(params).then((res) => {
                            if (res.data.status == 200) {
                                this.listLoading = false;  //隐藏loading

                                this.$message({
                                    type: 'success',
                                    message: '启用成功!'
                                });

                                this.getProducts();
                            } else {
                                if (res.data.status == 401) {
                                    this.$router.push('/login');
                                }
                                this.$message.error(res.data.status + " " + res.data.msg);
                            }
                        });

                    }
                ).catch((e) => {
                    /*this.$message({
                        type: 'info',
                        message: e.message
                    });*/
                });
            },
            //分页page_size发生改变
            handleSizeChange(val) {
                this.pager.page_no = 1;
                this.pager.page_size = val;
                this.getProducts();
            }
            ,
            //分页page_no发生改变
            handleCurrentChange(val) {
                this.pager.page_no = val;
                this.getProducts();
            }
            ,
            //根据条件搜索销售数据-实体方法
            getProducts() {
                this.listLoading = true;  //显示loading

                let condition = this.filters;
                let params = {
                    page_size: this.pager.page_size,
                    page_no: this.pager.page_no,
                    condition: condition
                };

                api.productList(params).then((res) => {
                    let result = JSON.parse(res.data.datas);
                    if (res.data.status == 200) {
                        this.listLoading = false;  //隐藏loading
                        this.tableData = result.items;
                        this.pager.total = result.total;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });
            }
            ,
            //重置搜索表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.pager.page_no = 1;
                this.getProducts();
            }
            ,
            //初始化页面
            initData() {

                this.getProducts();
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();  //初始化页面数据
            })

        }
    }
</script>

<style scoped>

</style>